<template>
  <div class="main-context flex dashboard">
    <!-- <div class="dashboard-text">name: {{ name }}</div> -->
    <echarts
      ref="alreadyTest"
      style="width:48%;margin:10px"
      :option="alreadyTestOp"
      class="radius"
    />
    <echarts
      ref="testing"
      style="width:48%;margin:10px"
      :option="testing"
      class="radius"
    />
    <echarts
      ref="OEE"
      style="width:48%;margin:10px"
      :option="OEE"
      class="radius"
    />
    <!-- <echarts
      ref="echarts1"
      style="width:48%;height:400px;margin:10px"
      :option="yields"
      class="radius"
    /> -->
    <echarts
      ref="UPH"
      style="width:48%;margin:10px"
      :option="UPH"
      class="radius"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import echarts from '@/components/echarts/echarts.vue'
import { yields, UPH, alreadyTest, testing, OEE } from './options.js'
export default {
  name: 'Dashboard',
  components: {
    echarts
  },
  data() {
    return {
      yields,
      UPH,
      testing,
      OEE,
      alreadyTestOp: {},
      projectId: ''
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  async created() {
    this.projectId = this.$store.getters.projectId
    await this.initChart()
    // await this.getCurrectProject()
    this.getAlreadyTotal()
    this.getAlreadyAwait()
    this.getOEE()
    this.getUPH()
  },
  methods: {
    async initChart() {
      await this.$nextTick(() => {
        this.alreadyTestOp = alreadyTest(this.$refs.alreadyTest.chart)
        this.$refs.alreadyTest.initChart(this.alreadyTestOp)
      })
    },
    async getCurrectProject(projectId) {
      let params = null
      if (projectId) {
        params = { 'projectId': projectId + '' }
      }
      await this.$fetchData(this.$api.projectController.getUserNewOpened, params, 'post').then(res => {
        this.projectId = res.projectId
      })
    },
    getAlreadyTotal() {
      const params = { 'projectId': this.projectId + '' }
      this.$refs.alreadyTest.chart.showLoading()
      this.$fetchData(this.$api.DashController.getAlreadyTotal, params, 'post').then(res => {
        this.alreadyTestOp.series[0].data = res.fab
        const fabs = res.fab
        let sumValues
        if (fabs.length > 1) {
          sumValues = fabs.reduce(function(prev, cur, index, arr) {
            return prev.value + cur.value
          })
        } else {
          sumValues = fabs[0].value
        }
        this.alreadyTestOp.graphic[0].style.text = sumValues
        this.$refs.alreadyTest.initChart(this.alreadyTestOp)
        this.$refs.alreadyTest.chart.hideLoading()
      })
    },
    getAlreadyAwait() {
      this.$refs.testing.chart.showLoading()
      const params = { 'projectId': this.projectId + '' }
      this.$fetchData(this.$api.DashController.getAlreadyAwait, params, 'post').then(res => {
        const names = res.map(item => item.name)
        const alreadyNum = res.map(item => item.alreadyNum)
        const awaitNum = res.map(item => item.awaitNum)
        this.testing.xAxis.data = names
        this.testing.series[0].data = alreadyNum
        this.testing.series[1].data = awaitNum
        this.$refs.testing.initChart(this.testing)
        this.$refs.testing.chart.hideLoading()
      })
    },
    getOEE() {
      this.$refs.OEE.chart.showLoading()
      const params = { 'projectId': this.projectId + '' }
      this.$fetchData(this.$api.DashController.getOEE, params, 'post').then(res => {
        const data = res.data
        const names = data.map(item => item.name)
        const values = data.map(item => item.OEE.substring(0, item.OEE.length - 1))
        this.OEE.xAxis[0].data = names
        this.OEE.series[0].data = values
        this.OEE.series[1].data = [res.averageOEE.substring(0, res.averageOEE.length - 1)]
        this.$refs.OEE.initChart(this.OEE)
        this.$refs.OEE.chart.hideLoading()
      })
    },
    getUPH() {
      this.$refs.UPH.chart.showLoading()
      const params = { 'projectId': this.projectId + '' }
      this.$fetchData(this.$api.DashController.getUPH, params, 'post').then(res => {
        const data = res.data
        const names = data.map(item => item.name)
        const values = data.map(item => item.UPH)
        this.UPH.xAxis[0].data = names
        this.UPH.series[0].data = values
        this.UPH.series[1].data = [res.averageUPH]
        this.$refs.UPH.initChart(this.UPH)
        this.$refs.UPH.chart.hideLoading()
      })
    }
  }

}
</script>

<style lang="scss" scoped>
  .dashboard{
    // background-color:  #0f375f;
  }
</style>
